<!--企业列表-->
<template>
	<div class="container">
		<el-link icon="el-icon-arrow-left" :underline="false" @click="goBack"
			v-if="roles[0].authority !== 'ROLE_OPERATE'">返回</el-link>
		<div class="top-part">
			<div class="title">企业查询</div>
			<div class="btn-group">
				<template v-if="roles[0].authority === 'ROLE_ADMIN'">
					<el-upload ref="upload" style="display: inline-block; margin-right: 10px" accept=".xlsx"
						name="uploadFile" :headers="headers" :action="assetImportUploadUrl" :limit="1"
						:show-file-list="false" :disabled="uploadLoading"
						:on-progress="() => handleUploadProgress('upload')"
						:on-success="(res) => handleUploadSuccess(res, 'upload')">
						<el-button :loading="uploadLoading">资产导入</el-button>
					</el-upload>
					<el-upload ref="upload1" style="display: inline-block; margin-right: 10px" accept=".xlsx"
						name="uploadFile" :headers="headers" :action="checkTaskImportUploadUrl" :limit="1"
						:show-file-list="false" :disabled="upload1Loading"
						:on-progress="() => handleUploadProgress('upload1')"
						:on-success="(res) => handleUploadSuccess(res, 'upload1')">
						<el-button :loading="upload1Loading">核查任务导入</el-button>
					</el-upload>
				</template>
				<el-button v-if="roles[0].authority === 'ROLE_ADMIN'" @click="gotoVisit">拜访记录</el-button>
				<template v-if="roles[0].authority !== 'ROLE_SUPPORT'">
					<el-button @click="gotoCheck">审核列表</el-button>
					<el-button @click="gotoEdit(false)">新增企业</el-button>
					<el-button @click="checkDialogVisible = true">发起核查</el-button>
				</template>
				<el-dropdown v-if="roles[0].authority === 'ROLE_OPERATE'">
					<div class="user" style="cursor: pointer;">
						<img :src="avatar" alt />
						<span>操作员</span>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="logout">登出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>

		<div class="content-part">
			<div class="search-form">
				<el-form ref="searchForm" :model="searchForm" inline label-position="top">
					<el-form-item class="form-item" prop="unitName" label="企业名称">
						<el-input v-model="searchForm.unitName" type="text" placeholder="请输入企业"></el-input>
					</el-form-item>
					<el-form-item class="form-item" prop="hasIntelligence" label="是否备案">
						<el-select v-model="searchForm.hasRecord" placeholder="请选择">
							<el-option v-for="(it, ind) in hasRecordDict" :key="ind" :label="it.label"
								:value="it.value"></el-option>
						</el-select>
					</el-form-item>
					<template v-if="roles[0].authority === 'ROLE_ADMIN'">
						<el-form-item class="form-item" prop="unitOrgCode" label="统一社会信用代码">
							<el-input v-model="searchForm.unitOrgCode" type="text" placeholder="请输入统一社会信用代码"></el-input>
						</el-form-item>
						<el-form-item class="form-item" prop="supportUnitCode" label="支撑单位">
							<el-select v-model="searchForm.supportUnitCode" placeholder="请选择">
								<el-option v-for="(it, ind) in supportUnitDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<!-- <el-form-item class="form-item" prop="hasIntelligence" label="情报">
							<el-select v-model="searchForm.hasIntelligence" placeholder="请选择">
								<el-option v-for="(it, ind) in hasIntelligenceDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item> -->
					</template>
					<template v-else>
						<!-- <el-form-item
              class="form-item"
              prop="industryLabelCode"
              label="行业"
            >
              <el-select
                v-model="searchForm.industryLabelCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="(it, ind) in labelHybqDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item" prop="building" label="楼宇">
              <el-select v-model="searchForm.building" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in buildingListDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
						<el-form-item class="form-item" prop="checkTaskType" label="任务提示">
							<el-select v-model="searchForm.checkTaskType" placeholder="请选择">
								<el-option v-for="(it, ind) in checkTaskTypeDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-form>
				<div class="form-btn">
					<el-button type="text" @click="resetForm">重置</el-button>
					<el-button @click="search" style="margin-left: 36px">搜索</el-button>
				</div>
			</div>
			<div class="table">
				<el-table :data="dataList" :cell-class-name="cellClassName"
					:header-cell-class-name="headerCellClassName">
					<el-table-column align="left" prop="unitName" label="企业名称" min-width="300">
						<template slot-scope="{ row }">
							<span class="underline" @click="gotoDetail(row)">
								{{ row.unitName }}
							</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="linkmanName" label="联系人" min-width="90"></el-table-column>
					<el-table-column align="center" prop="linkmanPhone" label="联系电话" min-width="90"></el-table-column>
					<el-table-column align="center" prop="companyOrgType" label="企业类型" min-width="90">
						<template slot-scope="{ row }">
							{{
								companyOrgTypeDict.find((it) => it.value === row.companyOrgType)
									? companyOrgTypeDict.find((it) => it.value === row.companyOrgType).label
									: ''
							}}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="staffNumRange" label="人数" min-width="90"></el-table-column>
					<el-table-column align="center" prop="domainCount" label="域名"></el-table-column>
					<el-table-column align="center" prop="systemCount" label="信息系统"></el-table-column>
					<el-table-column align="center" prop="appCount" label="APP"></el-table-column>
					<el-table-column align="center" prop="appletCount" label="小程序"></el-table-column>
					<el-table-column align="center" prop="relationLabelCode" label="标签" min-width="90">
						<template slot-scope="{ row }">
							<el-button v-if="!row.relationLabelCode === 'GXBQ006'" class="table-btn" type="text" size="small"
								@click="showOrderDialog(row)">成单</el-button>
							<span v-else>{{
								relationLabelDict.find((it) => it.value === row.relationLabel)
									? relationLabelDict.find((it) => it.value === row.relationLabel).label
									: ''
							}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="拜访记录" min-width="90">
						<template slot-scope="{ row }">
							<el-button v-if="row.visitRecordCount != null" class="table-btn" type="text" size="small"
								@click="showVisitDialog(row)">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="supportUnitName" label="销售员"></el-table-column>
					<el-table-column align="center" prop="hasRecord" label="备案" sortable min-width="100">
						<template slot-scope="{ row }">
							<span :class="{ actived: row.hasRecord }">
								{{ row.hasRecord ? '已完成' : '未完成' }}
							</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="checkTaskType" label="核查类型" min-width="180">
						<template slot-scope="{ row }">
							<span v-for="(tag, index) in row.checkTaskType || []" :key="index" class="underline tag"
								@click="showTeskDialog(row)">{{
                  checkTaskTypeDict.find((it) => it.value === tag)
                    ? checkTaskTypeDict.find((it) => it.value === tag).label
                    : ''
                }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="computeTaskTerm" label="任务期限" sortable min-width="180">
						<template slot-scope="{ row }">
							<span v-if="row.color == 'r'" class="actived" style="color: red">{{
                row.computeTaskTerm
              }}</span>
							<span v-else-if="row.color == 'g'" class="actived"
								style="color: black">{{ row.computeTaskTerm }}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="50">
						<template slot-scope="{ row }">
							<el-button class="table-btn" type="text" size="small" :disabled="row.confirmStatus === 1"
								@click="gotoEdit(row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="page">
					<el-pagination layout="prev,slot, next" :total="total" @current-change="currentChange">
						<!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
						<span class="current">{{ pageNum }}</span>
						<span class="total">
							/{{
                total % pageSize == 0
                  ? total / pageSize
                  : Math.ceil(total / pageSize)
              }}
						</span>
						<!-- <el-button type="text" class="next">下一页</el-button> -->
					</el-pagination>
				</div>
			</div>
		</div>
		<checkDialog v-model="checkDialogVisible" :row="tableRow" />
		<teskDialog v-model="teskDialogVisible" :row="tableRow" />
		<visitDialog v-model="visitDialogVisible" :row="tableRow" />
		<orderDialog v-model="orderDialogVisible" :row="tableRow" />
	</div>
</template>

<script>
	import checkDialog from './component/checkDialog.vue'
	import teskDialog from './component/teskDialog.vue'
	import visitDialog from './component/visitDialog.vue'
	import orderDialog from './component/orderDialog.vue'
	import {
		getEnterpriseList,
		manageGetEnterpriseList
	} from '@/api/enterprise'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		components: {
			checkDialog,
			teskDialog,
			visitDialog,
			orderDialog
		},
		data() {
			return {
				uploadLoading: false,
				upload1Loading: false,
				assetImportUploadUrl: process.env.VUE_APP_BASE_API + '/dataImport/assetImport',
				checkTaskImportUploadUrl: process.env.VUE_APP_BASE_API +
					'/dataImport/checkTaskImport',
				searchForm: {
					unitName: '',
					hasRecord: null,
					unitOrgCode: '',
					supportUnitCode: '',
					hasIntelligence: '',
					industryLabelCode: '',
					building: '',
					checkTaskType: ''
				},
				tableRow: {},
				dataList: [{
					a: '上海百万投资管理有限公司',
					d: false,
					e: true,
					f: false,
					g: ['交互式', '有孔', '备案'],
					h: '超过5小时'
				}],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				checkDialogVisible: false, // 核查弹窗
				teskDialogVisible: false, // 任务弹窗
				visitDialogVisible: false, // 拜访记录弹窗
				orderDialogVisible: false, // 成单弹窗
			}
		},
		computed: {
			avatar() {
				return this.$store.getters.avatar
			},
			isReLoad() {
				return this.$store.getters.isReLoad
			},
			headers() {
				return {
					Authorization: getToken()
				}
			},
			roles() {
				return this.$store.getters.roles
			},
			supportUnitDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.supportUnit) {
					list.push({
						label: dict.supportUnit[value],
						value
					})
				}
				return list
			},
			hasRecordDict() {
				const list = [{
						label: '是',
						value: 1
					},
					{
						label: '否',
						value: 0
					}
				]
				return list
			},
			hasIntelligenceDict() {
				const list = [{
						label: '是',
						value: 1
					},
					{
						label: '否',
						value: 0
					}
				]
				return list
			},
			labelHybqDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.labelHybq) {
					list.push({
						label: dict.labelHybq[value],
						value
					})
				}
				return list
			},
			buildingListDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.buildingList) {
					list.push({
						label: dict.buildingList[value],
						value
					})
				}
				return list
			},
			checkTaskTypeDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.checkTaskType) {
					list.push({
						label: dict.checkTaskType[value],
						value
					})
				}
				return list
			},
			relationLabelDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.relationLabel) {
					list.push({
						label: dict.relationLabel[value],
						value
					})
				}
				return list
			},
			companyOrgTypeDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.companyOrgType) {
					list.push({
						label: dict.companyOrgType[value],
						value
					})
				}
				return list
			}
		},
		watch: {
			isReLoad(val) {
				if (val) {
					this.search()
					this.$store.dispatch('app/setReLoad', false)
				}
			}
		},
		mounted() {
			const unitName = this.$route.query.unitName
			if (unitName) {
				this.searchForm.unitName = unitName
			}
			this.search()
		},
		methods: {
			resetForm() {
				this.searchForm = {
					unitName: '',
					unitOrgCode: '',
					supportUnitCode: '',
					hasIntelligence: '',
					industryLabelCode: '',
					building: '',
					checkTaskType: ''
				}
			},
			search() {
				this.pageNum = 1
				this.getList()
			},
			getList() {
				let fn = getEnterpriseList
				if (this.roles[0].authority === 'ROLE_ADMIN') {
					fn = manageGetEnterpriseList
				}
				fn({
					...this.searchForm,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					this.dataList = res.data.list.map((it) => {
						it.color == 'r'
						if (it.computeTaskTerm) {
							if (it.computeTaskTerm === null) {
								it.computeTaskTerm = ''
							} else if (it.computeTaskTerm > 0) {
								it.computeTaskTerm = '逾期' + Math.abs(it.computeTaskTerm) + '天'
							} else if (it.computeTaskTerm === 0) {
								it.computeTaskTerm = '截止今日'
							} else if (it.computeTaskTerm < 0) {
								it.computeTaskTerm = '剩余' + Math.abs(it.computeTaskTerm) + '天'
								it.color == 'g'
							}
						} else {
							it.computeTaskTerm = ''
						}
						return {
							...it,
							checkTaskType: it.checkTaskType ? JSON.parse(it.checkTaskType) : []
						}
					})

					console.log(this.dataList)
					this.total = res.data.total
				})
			},
			currentChange(page) {
				this.pageNum = page
				this.getList()
			},
			cellClassName({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (column.property === 'unitName') {
					return 'unitName'
				}
			},
			headerCellClassName({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (column.property === 'unitName') {
					return 'unitName'
				}
			},
			gotoVisit() {
				this.$router.push({
				  path: '/visit/index'
				})
			},
			gotoCheck() {
				// this.$router.push({
				//   path: '/check/index'
				// })
				let routeData = this.$router.resolve({
					path: '/check/index'
				})
				window.open(routeData.href, '_blank')
			},
			gotoEdit(row) {
				let path = '/enterprise/edit'
				if (row) {
					path += `?enterpriseId=${row.id}&unitOrgCode=${row.unitOrgCode}`
				}
				// this.$router.push({
				//   path
				// })

				let routeData = this.$router.resolve({
					path
				})
				window.open(routeData.href, '_blank')
			},
			gotoDetail(row) {
				// this.$router.push({
				//   path:
				//     '/enterprise/detail?unitName=' +
				//     unitName +
				//     '&unitOrgCode=' +
				//     unitOrgCode
				// })
				let routeData = this.$router.resolve({
					path: `/enterprise/detail?enterpriseId=${row.id}&unitName=${row.unitName}&unitOrgCode=${row.unitOrgCode}`
				})
				window.open(routeData.href, '_blank')
			},
			showTeskDialog(row) {
				if (this.roles[0].authority !== 'ROLE_SUPPORT') {
					return
				}
				this.tableRow = row
				this.teskDialogVisible = true
			},
			showOrderDialog(row) {
				this.tableRow = row
				this.orderDialogVisible = true
			},
			showVisitDialog(row) {
				this.tableRow = row
				this.visitDialogVisible = true
			},
			handleUploadProgress(name) {
				this[name + 'Loading'] = true
			},
			handleUploadSuccess(res, refName) {
				if (res.code === 200) {
					this.$message.success('上传成功')
					this[refName + 'Loading'] = false
					this.$refs[refName].clearFiles()
				}
			},
			async logout() {
				this.$confirm('确定退出系统吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$store.dispatch('LogOut').then(() => {
							location.href = '/login'
						})
					})
					.catch(() => {})
			},
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 48px 108px;

		.top-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 20px;

			.title {
				font-size: 26px;
			}

			.btn-group {
				display: flex;
				align-items: center;
			}

			.user {
				display: flex;
				align-items: center;
				margin-left: 0.14rem;
				width: 1.5rem;
				height: 0.6rem;
				background: rgba(255, 255, 255, 0.6);
				box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);
				border-radius: 0.04rem;
				font-size: 0.23rem;
				color: #000822;
				padding-left: 0.1rem;
				box-sizing: border-box;

				img {
					width: 0.45rem;
					height: 0.45rem;
					border-radius: 0.07rem;
					margin-right: 0.11rem;
				}
			}
		}

		.content-part {
			background: #1c4088;
			border-radius: 8px 8px 8px 8px;

			.search-form {
				display: flex;
				justify-content: space-between;
				padding: 20px;

				.form-item {
					width: 190px;
					margin-bottom: 0;
					border-left: 1px solid rgba(255, 255, 255, 0.3);

					&:first-child {
						border: none;
					}
				}

				.form-btn {
					height: 72px;
					display: flex;
					align-items: center;
					margin-bottom: 0;

					.el-button--text {
						font-size: 16px;
						color: rgba(255, 255, 255, 0.6);
					}

					.el-button--default {
						width: 80px;
						height: 40px;
						background: #000822;
						border-radius: 4px 4px 4px 4px;
						font-size: 16px;
						color: #ffffff;
						border: none;
					}
				}

				::v-deep .el-form-item {
					.el-form-item__label {
						color: #ffffff;
						padding: 0 15px;
					}

					.el-input__inner {
						background: #1c4088;
						border: none;
						color: #ffffff;
					}
				}
			}

			.table {
				background: #ffffff;
				box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
				border-radius: 8px 8px 8px 8px;

				::v-deep {
					.unitName {
						.cell {
							padding-left: 40px;
						}
					}
				}

				.underline {
					cursor: pointer;
					color: #e70012;
					border-bottom: 1px solid #e70012;

					&.tag {
						color: #606266;
						border-bottom: 1px solid rgba(0, 8, 34, 0.6);

						&:not(:last-child) {
							margin-right: 10px;
						}
					}
				}

				.actived {
					color: #e70012;
				}

				.table-btn {
					color: rgba(0, 8, 34, 0.8);
					border-bottom: 2px solid #1c4088;
					padding: 4px 0;

					&.is-disabled {
						color: #c0c4cc;
						border-bottom: 2px solid #c0c4cc;
					}
				}

				.page {
					margin-top: 20px;
					text-align: center;
					color: #000822;
					font-size: 14px;

					span {
						min-width: auto;
					}

					.current {
						color: #1c4088;
						font-size: 16px;
					}

					.prev {
						color: rgba(0, 8, 34, 0.6);
						margin-right: 40px;
					}

					.next {
						color: rgba(0, 8, 34, 0.6);
						margin-left: 40px;
					}

					// ::v-deep {
					//   .el-pagination .btn-prev {
					//     padding-right: 0;
					//   }
					//   .el-pagination .btn-next {
					//     padding-left: 0;
					//   }
					// }
				}
			}
		}
	}
</style>